@import '../../common.scss';

.related {
    position: relative;
    width: 100%;
    height: 100%;
}

.update {
    height: calc(100% - 62px);
    overflow-y: scroll;
}

.fittings-params-form {
    background: #F6F8FA;

    .el-form {
        padding: 20px 20px 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 50px;

        .space {
            flex: 1;
            display: flex;
            gap: 8px;
        }

        ::v-deep(.el-select__wrapper),
        ::v-deep(.el-input__wrapper) {
            background: white;
        }
    }

    .fittings-form-btn {
        display: flex;
        justify-content: end;
    }
}

.products-list {
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;

    .products-item {
        box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
        border-radius: 10px;
        position: relative;

        img {
            width: 100%;
            height: var(--height);
            border-radius: 10px;
        }

        .products-name {
            line-height: 24px;
            padding: 10px;
        }

        .checkbox {
            position: absolute;
            top: 0px;
            left: 10px;
        }
    }
}

.pagination {
    display: flex;
    justify-content: center;
    margin-bottom: 70px;
}

.all-checkbox {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 50px;
    background: white;
    display: flex;
    align-items: center;
    box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.1);
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 9;
    justify-content: space-between;
}

.el-checkbox-group {
    font-size: unset !important;
}

::v-deep(.el-checkbox__inner) {
    border-radius: 50% !important;
    transform: scale(1.5);
}

::v-deep(.el-select__wrapper) {
    background: white !important;
}